<template>
  <div class="tx">
    <div class="left">
      <img
        src="https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        alt=""
      />
      <h3>欢迎您张小丽</h3>
      <p>某主任</p>
      <div class="detail">数据来源</div>
      <!-- <div :style="{ width: '200px', height: '200px' }" id="myChart5"></div> -->
      <ul class="ullist">
        <li><span>所属学院</span><span>23</span></li>
        <li><span>所属专业</span><span>23</span></li>
        <li><span>选课数量</span><span>23</span></li>
        <li><span>综合排名</span><span>23</span></li>
        <li><span>专业排名</span><span>23</span></li>
      </ul>
    </div>
    <div class="right">
      <div class="qq" style="margin-top: 70px">
        <ul>
          <li>个人信息</li>
          <li>个人基本信息</li>
          <li>思想境界</li>
          <li>专业水平</li>
          <li>文化素养</li>
          <li>身心健康</li>
          <li>创新实践</li>
        </ul>
      </div>

      <div class="contentbox">
        <div class="theme">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
        </div>
        <div class="topic">
          <div class="top">
            <div class="topic1">
              <h3>学生</h3>
              <p><i>姓名：</i>张XX</p>
              <p>
                <label><i>学号：</i>20227777 </label>
                <label><i>班级：</i>2022</label>
              </p>
              <p>
                <label><i>院系:</i>xxx </label>
                <label><i>专业：</i>xxx</label>
              </p>
              <p>
                <label><i>高考类型：</i>全日制统考 </label>
                <label><i>高考分数：</i>xxx</label>
              </p>
              <p><i>宿舍号：</i>b21栋444宿舍</p>
              <p><i>毕业中学：</i>宝鸡xx</p>
              <p><i>政治指数：</i>梵然</p>
              <p><i>联系方式：</i>138xxxxxxxx</p>
            </div>
            <div class="topic2">
              <h3>综合指数</h3>
              <div class="number">9.9</div>
              <p>平均分</p>
              <el-progress :percentage="100" :format="format"></el-progress>
              <p>参考器</p>
              <el-progress :percentage="100" :format="format"></el-progress>
              <div>
                <el-rate
                  v-model="value"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate>
              </div>
            </div>
          </div>
          <div class="bottom">
            <p text-align="left">综合素质表</p>

            <div class="chart-wrapper">
              <raddar-chart />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RaddarChart from "./components/RaddarChart.vue";
export default {
  components: { RaddarChart },
  data() {
    return {
      value: 5,
    };
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
  },
};
</script>
<style lang="scss">
.tx {
  background: linear-gradient(top left, #0094d6, #1f67af);
  display: flex;
}
.right .contentbox {
  display: flex;
  justify-content: space-between;
}
.contentbox .topic2 .number {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 60px;
  color: #d3a448;
}
.contentbox .topic .top {
  display: flex;
  justify-content: space-between;
  width: 540px;
  height: 240px;
}
.contentbox .topic .top .topic1 p {
  line-height: 10px;
  line-height: 10px;
}
.right .contentbox .theme {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 600px;
  flex-wrap: wrap;
}
.right .contentbox .theme > div {
  width: 160px;
  height: 130px;
  margin: 20px 50px 20px 10px;
  background-color: #598bb0;
}
.right .qq ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  margin: 0 3px;
}
.right .qq ul li {
  display: block;
  text-align: center;
  background-color: #134077;
  margin: 0 5px;
  flex: 1;
}
.left {
  min-width: 200px !important;
  border-right: 1px solid #000;
  box-sizing: content-box;
}
.left img {
  position: relative;
  display: block;
  margin: 60px 0 0 20px;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  box-shadow: 3px 3px 3px #666;
  border: 3px solid #111;
}
.left h3,
p {
  text-align: center;
}
.left .detail {
  background-color: #013358;
  height: 30px;
  line-height: 30px;
  padding-left: 2px;
}
.left .ullist {
  text-align: left;
  padding: 3px;
  margin-left: 0;
  list-style: none;
}
.left .ullist li {
  display: flex;
  justify-content: space-between;
  height: 30px;
}
.left .ullist li:nth-child(1) {
  border-bottom: 2px solid #c45955;
}
.left .ullist li:nth-child(2) {
  border-bottom: 3px solid #64bfe9;
}
.left .ullist li:nth-child(3) {
  border-bottom: 3px solid #d7a959;
}
.left .ullist li:nth-child(4) {
  border-bottom: 4px solid #47a26b;
}
.left .ullist li:nth-child(5) {
  border-bottom: 5px solid #61a0a8;
}
.left .ullist li span:nth-child(1) {
  display: inline-block;
  padding-left: 2px;
}
.left .ullist li span:nth-child(2) {
  display: inline-block;
  padding-right: 3px;
}

#myChart2 {
  transform: scale(0.5);
}
</style>
